<html lang="en"><head>
    <meta charset="UTF-8">
    <title>Grid and canvas</title>
    <style>

        #page {
            display: grid;
            width: 100%;
            height: 600px;
            grid-template-areas: "head head"
            "nav  main"
            "nav  foot";
            grid-template-rows: 10% 1fr 5%;
            grid-template-columns: 15% 1fr;
        }

        #page > header {
            grid-area: head;
            background-color: #8ca0ff;
        }

        #page > nav {
            grid-area: nav;
            background-color: #ffa08c;
        }

        #page > main {
            grid-area: main;
            background-color: #ffff64;
        }

        #page > footer {
            grid-area: foot;
            background-color: #8cffa0;
        }
    </style>

</head>
<body data-new-gr-c-s-check-loaded="14.1014.0" data-gr-ext-installed="">
<section id="page">
    <header>Header</header>
    <nav>Navigation</nav>
    <main>
        <canvas id="myCanvas" width="200" height="300"></canvas>
        <script>
            var canvas = document.getElementById('myCanvas');
            var context = canvas.getContext('2d');
            context.font = "30px Arial";
            context.strokeText("Hello World", 10, 50);

        </script>
    </main>
    <footer>Footer</footer>
</section>




</body></html>